<template>
    <div>
        <el-table :data="props.list" style="width: 100%" size="large" :height="props.height" border :fit="true">
            <el-table-column fixed prop="name" label="业务类型" align="center" />
            <el-table-column prop="new_name" label="类别" align="center" />
            <el-table-column prop="new_children" label="标签" align="center">
                <template #default="scope">
                    <span v-for="(item, index) in scope.row.new_children" :key="index">
                        {{ item.name }}&nbsp;
                    </span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="handleAdd(scope.$index, scope.row)">添加岗位</el-button>
                    <el-button link type="primary" size="small"
                        @click="handleDelete(scope.$index, scope.row)">操作标签</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <el-dialog v-model="dialogVisible" title="标签操作" width="30%">

                <el-tag v-for="(item, index) in list" :key="index" closable :disable-transitions="false"
                    @close="handleClose(item.id)">
                    {{ item.name }}
                </el-tag>
                <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" size="small"
                    @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" class="add_tag" />
                <el-button v-else class="add_tag" size="small" @click="showInput">
                    + 标签
                </el-button>

            </el-dialog>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { defineProps, ref, nextTick } from "vue"
import { change_industry, delete_industry } from "@/request/api/category.ts"
import { reload } from "@/utils/flushed"
import { ElInput } from 'element-plus'
const props = defineProps(["height", "list"])
let dialogVisible = ref(false)
const handleEdit = (index: number, row: any) => {
    console.log(row, "rowrowrowrow")
    ElMessageBox.prompt('名称', '修改名称', {
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '请输入名称',
        inputPlaceholder: '请输入名称',
        beforeClose: async (action: any, instance: any, done: any) => {
            if (action == 'confirm') {
                let data = await change_industry({ id: row.id, name: instance.inputValue, parent_id: row.parent_id, style: 1 })
                if (data.code != 200)
                    return ElMessage({
                        message: data.message,
                        type: 'error',
                    });
                ElMessage({
                    message: '操作成功',
                    type: 'success',
                });
                done();
                reload()
            } else {
                //点击取消关闭
                done();
            }
        },
    });
}
const handleAdd = (index: number, row: any) => {
    console.log(row, "rowrowrowrow")
    ElMessageBox.prompt('添加', '添加', {
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '请输入添加名称',
        inputPlaceholder: '请输入添加名称',
        beforeClose: async (action: any, instance: any, done: any) => {
            if (action == 'confirm') {
                let data = await change_industry({ name: instance.inputValue, parent_id: row.id, style: 1 })
                if (data.code != 200)
                    return ElMessage({
                        message: data.message,
                        type: 'error',
                    });
                ElMessage({
                    message: '操作成功',
                    type: 'success',
                });
                done();
                reload()
            } else {
                //点击取消关闭
                done();
            }
        },
    });
}
const list: any = ref([])

const handleDelete = async (index: number, row: any) => {
    console.log(row, "rowrowrowrow")
    list.value = row.new_children
    active_list = row
    dialogVisible.value = true
}
const inputValue = ref('')
const InputRef = ref<InstanceType<typeof ElInput>>()
const inputVisible = ref(false)
const handleClose =async (id: string) => {
    console.log(id,"dadad");
    let data = await delete_industry({id : id})
    if (data.code != 200)
        return ElMessage({
            message: data.message,
            type: 'error',
        });
    ElMessage({
        message: '操作成功',
        type: 'success',
    });
    reload()
}
let active_list: any = []
const showInput = () => {
    inputVisible.value = true
    nextTick(() => {
        InputRef.value!.input!.focus()
    })
}

const handleInputConfirm = async () => {
    // change_industry
    let data:any = await change_industry({ parent_id: active_list.id, name: inputValue.value, style: 2 })
    if (data.code != 200)
        return ElMessage({
            message: data.message,
            type: 'error',
        });
    ElMessage({
        message: '操作成功',
        type: 'success',
    });
    reload()
}
</script>
<style lang="scss" scoped>
:deep(.cell){
    color:#5e6d82 ;
    font-size: 13px;
}
:deep(thead){
    .cell{
        color:#1f2f3d ;
        font-size: 14px;
        font-weight: 650;
    }
}

:deep(tr) {
    height: 50px;
}

.add_tag {
    height: 30px;
    width: 60px;
    margin-top: 20px;
}

:deep(.el-tag) {
    margin-right: 20px;
    margin-top: 20px;
}
</style>
  